<template>
	<div>
		<div v-loading="loading" class="vs-table-box" style="padding: 20px 100px">
			<div class="user-info">
				<div class="user-box">
					<el-image v-if="integral.user" class="user-img" fit="cover" :src="integral.user.avatar" :preview-src-list="[integral.user.avatar]"> </el-image>
					<div v-if="integral.user" class="user-name">{{ integral.user.username }}</div>
				</div>
				<div class="user-order" v-if="integral.ordersIntegralGoods">
					<div>订单编号：{{ integral.ordersIntegralGoods.orders.out_trade_no }}</div>
					<div>下单日期：{{ integral.ordersIntegralGoods.orders.create_time }}</div>
				</div>
				<!-- <div class="user-order" v-if="integral.ordersIntegralGoods">
                <div>订单编号：{{integral.ordersIntegralGoods.orders.out_trade_no}}</div>
                <div>下单日期：{{integral.ordersIntegralGoods.orders.create_time}}</div>
            </div> -->
			</div>
			<div v-if="integral.goodsIntegral">
				<div class="tit">商品信息</div>
				<div class="order_info">
					<div class="order_info_top">
						<div class="img">
							<el-image v-if="integral.goodsIntegral" style="width: 100%; height: 100%" fit="cover" :src="integral.goodsIntegral.images" :preview-src-list="[integral.goodsIntegral.images]"> </el-image>
						</div>
						<div v-if="integral.goodsIntegral" class="order_info_top_right">
							<!-- 后端让去掉 -->
							<!-- <div>商品编码 ： {{integral.title}}</div> -->
							<div>商品系列 ： {{ integral.goodsIntegral.title }}</div>
							<div>花费积分 ： {{ integral.goodsIntegral.integral }}</div>
							<div></div>
						</div>
					</div>
				</div>
			</div>
			<div v-if="integral.project">
				<div class="tit">服务项目信息</div>
				<div class="order_info">
					<div class="order_info_top">
						<div class="img">
							<el-image v-if="integral.project" style="width: 100%; height: 100%" fit="cover" :src="integral.project.img" :preview-src-list="[integral.project.img]"> </el-image>
						</div>
						<div v-if="integral.project" class="order_info_top_right">
							<!-- 后端让去掉 -->
							<div>项目编码 ： {{ integral.project.number }}</div>
							<div>项目名称 ： {{ integral.project.name }}</div>
							<div>项目描述 ： {{ integral.project.desc }}</div>
							<div>项目金额 ： ￥{{ integral.project.price }}</div>
							<div></div>
						</div>
					</div>
				</div>
			</div>
			<!-- 后端不要了 -->
			<div class="tit">评价内容</div>
			<el-form :model="integral" style="margin-left: 30px">
				<el-form-item label="评论时间">
					{{ integral.create_time }}
				</el-form-item>
				<el-form-item label="商品评分">
					<el-rate :value="integral.project ? integral.project_score : integral.goods_score" disabled style="margin-top: 10px" show-score text-color="#ff9900" score-template="{value}"> </el-rate>
				</el-form-item>
				<el-form-item label="评论图片">
					<vs-uploading :value="comments" readonly></vs-uploading>
				</el-form-item>
				<el-form-item label="评论内容">
					<div class="reply-box">
						<div class="reply-content">
							{{ integral.content }}
						</div>
						<div>
							<el-button v-if="integral.reply_content" type="text" disabled>已回复</el-button>
							<el-button v-else @click="isReply = true" type="text">回复</el-button>
						</div>
					</div>
				</el-form-item>
				<div v-show="isReply">
					<el-form-item v-if="integral.admin" label="回复人员">
						{{ integral.admin.name }}
					</el-form-item>
					<el-form-item v-if="integral.reply_time" label="回复时间">
						{{ new Date(integral.reply_time * 1000) | parseTime }}
					</el-form-item>
					<el-form-item label="回复内容">
						<el-input v-model="reply_content" :rows="4" type="textarea" placeholder=""></el-input>
					</el-form-item>
				</div>
				<el-form-item>
					<el-button @click="utils.backPage()">返回</el-button>
					<el-button v-show="isReply" type="primary" :loading="isBtn" @click="reply">{{ integral.reply_content ? '重新回复' : '确认' }}</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	import VsUploading from '@/components/VsUploading.vue';
	export default {
		components: { VsUploading },
		data() {
			return {
				keys: '',
				tableData: [{}],
				dialogVisible: false,
				isBtn: false,
				isBtn2: false,
				isReply: false,
				orderType: 1, //1.待收货  2.待领取  3.已完成
				num: 1,
				loading: false,
				userMsg: {},
				reply_content: '',
				form: {
					user_id: '',
					goods_integral_id: '',
					number: '',
				},
				storeList: [],
				integral: {},
			};
		},
		created() {
			let { id, type } = this.$route.query;
			if (id) {
				this.getIntegralComment(id);
			}
		},
		computed: {
			comments() {
				if (!this.integral.files) return [];
				return this.integral.files.split(',');
			},
		},
		methods: {
			async reply() {
				let reply_content = this.reply_content.trim();
				if (!reply_content) return this.$message.error('请输入要回复的内容');
				if (reply_content === this.integral.reply_content) return this.$message.error('重新回复的内容不能与上次一致');
				this.isBtn = true;
				let { code, data } = await this.$Http.setGoodsComment({
					reply_content,
					id: this.integral.id,
				});
				this.isBtn = false;
				if (code) {
					this.$message.success('回复成功!');
					this.utils.backPage();
				}
			},
			async getIntegralComment(id) {
				this.loading = true;
				let { code, data } = await this.$Http.getIntegralComment({ id });
				this.loading = false;
				if (code) {
					this.integral = data;
					this.reply_content = data.reply_content || '';
					if (data.reply_content) this.isReply = true;
				}
			},
			async goodsIntegralgetStore() {
				let { code, data } = await this.$Http.goodsIntegralgetStore();
				if (code) {
					this.storeList = data;
				}
			},
			handleChange() {},
			async subitm() {
				if (!this.form.user_id) return this.$message.error('请选择兑换的会员!');
				this.isBtn2 = true;
				let { code, data } = await this.$Http.goodsIntegralCreateOrders(this.form);
				this.isBtn2 = false;
				if (code) {
					this.$message.success('兑换成功!');
					this.utils.backPage();
				}
			},
			dialogBeforeClose() {
				this.dialogVisible = false;
			},
		},
	};
</script>

<style>
	.disabled .el-upload--picture-card {
		display: none !important;
	}
	.el-descriptions-item__content {
		min-width: 120px;
	}
	.el-input-group__append {
		padding: 0;
	}
</style>
<style lang="scss" scoped>
	.user-info {
		display: flex;
		justify-content: space-between;
		margin-top: 30px;
		.user-box {
			display: flex;
			align-items: center;
			.user-name {
				margin-left: 40px;
				font-size: 18px;
			}
		}
		.user-img {
			width: 100px;
			height: 100px;
		}
		.user-order {
			height: 100px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
	}
	.reply-box {
		display: flex;
		.reply-content {
			flex: 1;
		}
	}
	.inquire {
		cursor: pointer;
		line-height: 37px;
		width: 60px;
		text-align: center;
	}
	.orderStatus {
		padding: 40px 40px;
		display: flex;
		align-items: center;

		.left_order_status {
			display: flex;
			align-items: center;

			> span {
				margin-left: 30px;
				font-size: 22px;
				color: red;
			}
		}

		.right_money {
			margin-left: auto;
			display: flex;
			align-items: center;

			> div {
				display: flex;
			}

			> div:first-child {
				margin-right: 40px;
				color: red;
			}
		}
	}

	.tit {
		margin: 20px 0;
		font-size: 16px;
		font-weight: 700;
	}

	.money {
		display: flex;
		flex-direction: column;

		> div {
			padding: 0 40px;
			margin-top: 10px;
			text-align: right;
		}
	}

	.dialog_tit {
		padding-bottom: 10px;
		border-bottom: 1px solid rgba($color: #000000, $alpha: 0.2);
	}

	.order_info {
		display: flex;
		flex-direction: column;
		padding: 20px 40px;

		.order_info_top {
			display: flex;

			.img {
				height: 150px;
				width: 300px;
				background-color: rgba($color: #000000, $alpha: 0.2);
			}

			.order_info_top_right {
				display: flex;
				flex-direction: column;
				// justify-content: space-between;
				margin-left: 20px;
				padding: 15px 0;
				font-size: 14px;
				line-height: 30px;
				color: rgba($color: #000000, $alpha: 0.7);
			}
		}

		.order_info_bottom {
			margin-top: 40px;
			display: flex;
			flex-direction: column;
			line-height: 30px;
			font-size: 14px;
			color: rgba($color: #000000, $alpha: 0.7);
		}
	}
</style>
